<template>
  <view>
    <view class="p-t-22 bgwhite">
      <u-tabs
        :scrollable="false"
        lineWidth="130rpx"
        lineColor="#00D075"
        :activeStyle="{
          color: '#00D075',
        }"
        :inactiveStyle="{
          color: '#788096',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px;padding-bottom:16rpx; height: 62rpx;"
        :current="topCurrent"
        :list="list1"
        @click="topclick"
      ></u-tabs>
    </view>
    <view class="p-t-26 p-b-26 bgwhite">
      <u-tabs
        lineWidth="0"
        :activeStyle="{
          color: '#fff',
          background: '#00D075',
          borderRadius: '50rpx',
          padding: '6rpx 24rpx',
        }"
        :inactiveStyle="{
          color: '#1C274C',
          padding: '6rpx 24rpx',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px;  "
        :list="list2"
        :current="typeCurrent"
        @click="typeclick"
      ></u-tabs>
    </view>
    <block v-if="topCurrent == 0">
      <view class="m-24 p-26 bgwhite blockitem" v-for="(item, index) in list" :key="index" v-if="item.order_type !== 4">
        <view class="flex m-b-24">
          <image :src="$util.img(item.goods_image)" class="a-img" mode="aspectFill" lazy-load></image>
          <view class="m-l-24" style="flex: 2">
            <view class="font-30 font-weight-8 text-cut" style="width: 404rpx">{{ item.goods_name }}</view>
            <view class="flex" v-if="item.order_type == 0">
              <u-icon name="clock" size="12" color="#8A91A4"></u-icon>
              <text class="font-26 m-l-10" style="color: #788096"
                >{{ item.week }} {{ item.start_time }} - {{ item.end_time }}</text
              >
            </view>
            <view class="flex" v-if="item.order_type == 0">
              <u-icon name="map" size="12" color="#8A91A4"></u-icon>
              <view class="font-26 m-l-10 text-cut" style="color: #788096; width: 350rpx"
                >{{ item.full_address }} {{ item.address }}</view
              >
            </view>
            <view class="flex-between m-t-24" v-if="item.order_status_name !== '待支付'">
              <view class="">
                <block v-if="parseFloat(item.order_money) > 0">
                  <text class="font-20 font-weight-8" style="color: #ff3f42">￥</text>
                  <text class="font-32 font-weight-8" style="color: #ff3f42">{{ item.order_money }}</text>
                </block>
                <block v-else>
                  <text class="font-weight-8" style="color: #ff3f42">0.00</text>
                </block>
                <text class="color-title2 m-l-10">{{ item.order_status_name }}</text>
              </view>
              <view
                class="line-btn"
                @click="cancelYuyue(item.order_id, item.order_status)"
                v-if="item.order_status !== -1"
                >取消预约</view
              >
            </view>
            <view class="m-t-24" v-else>
              <view class="flex-y-center">
                <block v-if="parseFloat(item.order_money) > 0">
                  <text class="font-20 font-weight-8" style="color: #ff3f42">￥</text>
                  <text class="font-32 font-weight-8" style="color: #ff3f42">{{ item.order_money }}</text>
                </block>
                <block v-else>
                  <text class="font-weight-8" style="color: #ff3f42">0.00</text>
                </block>
                <text class="m-l-10" style="color: #a4a9b7">{{ item.order_status_name }}</text>
                <view class="line-btn m-l-auto" @click="payOrder(item.out_trade_no)" v-if="item.order_status == 0"
                  >立即支付</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="graybg p-24">
          <view class="flex-between">
            <view class="labtext">姓名</view>
            <view>{{ item.name }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">手机号</view>
            <view>{{ item.mobile }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">预约时间</view>
            <view>{{ item.subscribe_time }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">购买数量</view>
            <view>{{ item.goods_num }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">预约地址</view>
            <view>{{ item.address }}</view>
          </view>
          <view class="flex-between m-t-24" v-if="item.pay_status == 1">
            <view class="labtext">支付方式</view>
            <view>{{ item.pay_type_name }}</view>
          </view>
          <view class="flex-between m-t-24" v-if="item.coupon_money > 0">
            <view class="labtext">优惠券</view>
            <view class="flex-y-center c-origin text-bold">-￥{{ item.coupon_money }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">备注</view>
            <view>{{ item.remark }}</view>
          </view>
        </view>
      </view>
    </block>
    <block v-if="topCurrent == 1">
      <view class="m-24 p-26 bgwhite blockitem" v-for="(item, index) in list" :key="index">
        <view class="flex m-b-24">
          <image :src="$util.img(item.goods_image)" class="f-img" mode="aspectFill" lazy-load></image>
          <view class="m-l-24" style="flex: 2">
            <view class="font-30 font-weight-8 text-cut" style="width: 404rpx">{{ item.goods_name }}</view>
            <view class="flex m-b-20">
              <view
                class="m-r-10"
                v-for="(tag, tagindex) in item.goods_label"
                :key="tagindex"
                :class="{ tags1: tagindex % 2 === 0, tags2: tagindex % 2 !== 0 }"
              >
                {{ tag }}
              </view>
            </view>
            <view class="flex-between m-t-24" v-if="item.order_status_name !== '待支付'">
              <view class="">
                <block v-if="parseFloat(item.order_money) > 0">
                  <text class="font-20 font-weight-8" style="color: #ff3f42">￥</text>
                  <text class="font-32 font-weight-8" style="color: #ff3f42">{{ item.order_money }}</text>
                </block>
                <block v-else>
                  <text class="font-weight-8" style="color: #ff3f42">0.00</text>
                </block>
                <text class="color-title2 m-l-10">{{ item.order_status_name }}</text>
              </view>
              <view
                class="line-btn"
                @click="cancelYuyue(item.order_id, item.order_status)"
                v-if="item.order_status !== -1"
                >取消预约</view
              >
            </view>
            <view class="m-t-24" v-else>
              <view class="flex-y-center">
                <block v-if="parseFloat(item.order_money) > 0">
                  <text class="font-20 font-weight-8" style="color: #ff3f42">￥</text>
                  <text class="font-32 font-weight-8" style="color: #ff3f42">{{ item.order_money }}</text>
                </block>
                <block v-else>
                  <text class="font-weight-8" style="color: #ff3f42">0.00</text>
                </block>
                <text class="m-l-10" style="color: #a4a9b7">{{ item.order_status_name }}</text>
                <view class="line-btn m-l-auto" @click="payOrder(item.out_trade_no)" v-if="item.order_status == 0"
                  >立即支付</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="graybg p-24">
          <view class="flex-between">
            <view class="labtext">姓名</view>
            <view>{{ item.name }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">手机号</view>
            <view>{{ item.mobile }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">预约时间</view>
            <view>{{ item.subscribe_time }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">购买数量</view>
            <view>{{ item.goods_num }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">预约地址</view>
            <view>{{ item.address }}</view>
          </view>
          <view class="flex-between m-t-24" v-if="item.pay_status == 1">
            <view class="labtext">支付方式</view>
            <view>{{ item.pay_type_name }}</view>
          </view>
          <view class="flex-between m-t-24">
            <view class="labtext">备注</view>
            <view>{{ item.remark }}</view>
          </view>
        </view>
      </view>
    </block>
    <view class="safebot"></view>

    <emptyData
      :width="empty.width"
      :height="empty.height"
      :text="empty.text"
      :icon="empty.icon"
      :marginTop="empty.marginTop"
      v-if="list.length == 0"
    ></emptyData>
    <!-- 不能取消预约-弹窗提示 -->
    <u-modal
      :show="showModalTips"
      :content="modalContent"
      confirmText="联系客服"
      confirmColor="#ff8f33"
      :showCancelButton="true"
      @confirm="confirmTips"
      @cancel="showModalTips = false"
    ></u-modal>
  </view>
</template>
<!-- 1 接单中,2 已派单,10 完成 -->
<script>
export default {
  data() {
    return {
      list1: [
        {
          name: "活动预约",
        },
        {
          name: "餐饮预约",
        },
      ],
      topCurrent: 0,
      list2: [
        {
          name: "全部",
          status: "all",
        },
        {
          name: "接单中",
          status: "subscribe",
        },
        {
          name: "已派单",
          status: "send",
        },
        {
          name: "已完成",
          status: "complete",
        },
      ],
      typeCurrent: 0,
      page: 1,
      list: [],
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
      showModalTips: false,
      modalContent: "已派单，若取消订单请联系在线客服或致电4000385001 谢谢！",
    };
  },
  onLoad(e) {
    this.getList();
  },
  onReachBottom() {
    this.page++;
    this.getList();
  },
  methods: {
    topclick(e) {
      if (e.index != this.topCurrent) {
        this.topCurrent = e.index;
      }
      this.typeCurrent = 0;
      this.page = 1;
      this.getList();
    },
    typeclick(e) {
      if (e.index != this.typeCurrent) {
        this.typeCurrent = e.index;
      }
      this.page = 1;
      this.getList();
    },
    payOrder(out_trade_no) {
      this.$api.sendRequest({
        url: "/api/pay/pay",
        data: {
          out_trade_no: out_trade_no,
          pay_type: "wechatpay",
        },
        success: (res) => {
          if (res.code == 0) {
            var payData = res.data.data;
            this.pay(payData);
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    pay(payData) {
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          this.$util.showToast({ title: "支付成功" });
          this.page = 1;
          this.getList();
        },
        fail: (res) => {
          if (res.errMsg == "requestPayment:fail cancel") {
            this.$util.showToast({ title: "您已取消支付" });
          } else {
            uni.showModal({ content: "支付失败,失败原因: " + res.errMsg, showCancel: false });
          }
        },
      });
    },
    cancelYuyue(order_id, order_status) {
      var that = this;
      // 判断如果order_status == 2 就不能取消预约,弹窗提示，否则可以取消预约
      if (order_status !== 2) {
        uni.showModal({
          title: "提示",
          content: "确定取消预约？",
          success: function (res) {
            if (res.confirm) {
              console.log("用户点击确定");
              that.$api.sendRequest({
                url: "/api/subscribeorder/close",
                data: {
                  order_id: order_id,
                },
                success: (res) => {
                  if (res.code == 0) {
                    uni.showToast({
                      title: "取消成功",
                    });
                    that.list.splice(
                      that.list.findIndex((item) => item.order_id === order_id),
                      1
                    );
                  } else {
                    uni.showToast({
                      title: res.message,
                      icon: "none",
                    });
                  }
                },
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        that.showModalTips = true;
      }
    },
    confirmTips() {
      uni.makePhoneCall({
        phoneNumber: "4000385001",
      });
    },
    getList() {
      this.$api.sendRequest({
        url: "/api/subscribeorder/lists",
        data: {
          page: this.page,
          page_size: 20,
          order_type: this.topCurrent == 0 ? "all" : 4,
          order_status: this.list2[this.typeCurrent].status,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.list = [];
            this.list = [...this.list, ...res.data.list];

            if (this.topCurrent == 0) {
              // 循环数组，格式化开始时间和结束时间格式为08:00
              for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].start_time) {
                  this.list[i].start_time = this.formatTime(this.list[i].start_time, "HH:mm");
                }
                if (this.list[i].end_time) {
                  this.list[i].end_time = this.formatTime(this.list[i].end_time, "HH:mm");
                }
              }
            } else {
              this.list.forEach((item) => {
                if (item.goods_label) {
                  // 判断里面是否有逗号，如果有就分割成数组
                  if (item.goods_label.indexOf(",") != -1) item.goods_label = item.goods_label.split(",");
                  else item.goods_label = [item.goods_label];
                } else item.goods_label = [];
              });
            }
          }
        },
      });
    },
    formatTime(time) {
      //    time的格式是12:00:00
      return time.substring(0, 5);
    },
  },
};
</script>

<style lang="scss" scoped>
.bgwhite {
  background-color: #fff;
}
.blockitem {
  border-radius: 20rpx;
  .a-img {
    width: 216rpx;
    height: 216rpx;
    border-radius: 10rpx;
  }
}
.graybg {
  background-color: #f7f7f7;
  border-radius: 20rpx;
}
.labtext {
  color: #777d94;
}
.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.f-img {
  width: 176rpx;
  height: 176rpx;
  border-radius: 10rpx;
}
.labelit {
  color: #00b867;
  display: inline-block;
  padding: 2rpx 6rpx;
  border-radius: 6rpx;
  background-color: #e6faf1;
}
.line-btn {
  border: 1px solid #e7e8eb;
  border-radius: 50rpx;
  width: 139rpx;
  height: 52rpx;
  text-align: center;
  line-height: 52rpx;
  font-size: 24rpx;
}
.tags1 {
  font-size: 20rpx;
  color: #ff6619;
  border-radius: 10rpx;
  background: #fbede6;
  padding: 0 10rpx;
  margin-right: 10rpx;
}
.tags2 {
  font-size: 20rpx;
  color: #0c7eff;
  border-radius: 10rpx;
  background: #e6f2ff;
  padding: 0 10rpx;
}
.safebot {
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}
</style>
